<template>
  <div>
    <!-- 背景图 -->
    <img class="imgs" src="@/assets/特斯拉房产.jpg" alt="" />
    <!-- 搜索框 -->
    <div class="search">
      <div class="text">
        <div class="tips">搜索</div>
        <div class="triangle"></div>
      </div>
      <input @keyup.enter="goSearch" v-model="text" type="search" placeholder="Search Anything You Want..." />
      <button @click="search">🔍</button>
    </div>
    <!-- 底部列表组件 -->
    <footerList />
  </div>
</template>

<script>
// 房产列表接口
import { arceList } from '@/api/arcelist'
export default {
  data () {
    return {
      text: ''
    }
  },
  methods: {
    async search () {
      const res = await arceList()
      // console.log(30, res)
      // console.log(31, res.data)
      const arr = res.data
      const newArr = arr.filter(v => v.title === this.text)
      // console.log('22', newArr)
      this.$store.commit('arceList/Save_list', newArr)
      if (newArr.length !== 0) {
        this.$router.push('/arceList')
      } else {
        this.$message({
          type: 'warning',
          message: '没有找到该数据'
        })
      }
    },
    goSearch () {
      this.search()
      console.log(1)
    }
  }
}
</script>

<style scoped lang='scss'>
.imgs {
  width: 100%;
}
.search {
  display: block;
  position: absolute;
  top: 272px;
  left: 50%;
  transform: translateX(-50%);
  .text {
    .tips {
      text-align: center;
      display: inline-block;
      line-height: 30px;
      height: 30px;
      width: 60px;
      font-size: 13px;
      background-color: aqua;
    }
    .triangle {
      vertical-align: bottom;
      display: inline-block;
      width: 0px;
      height: 0px;
      border: 15px solid transparent;
      border-left-color: aqua;
      border-bottom-color: aqua;
    }
  }
  input {
    padding: 20px 25px;
    width: 428px;
    height: 35px;
    border: none;
    outline: none;
    color: #555;
  }
  button {
    float: right;
    width: 35px;
    height: 40px;
    border: none;
    cursor: pointer;
  }
}
</style>
